<template>
  <div class="synchronous">
    <el-dialog
      v-loading="loading"
      title="分类同步"
      :visible.sync="open"
      width="800px"
      append-to-body
      :before-close="close"
    >
      <el-tree :data="data" :props="defaultProps" accordion :expand-on-click-node="false" @node-click="handleNodeClick">
        <span slot-scope="{ node, data }" class="custom-tree-node">
          <span style="width: 100%;">{{ node.label }}
          </span>
          <span style="position: absolute;right: 0;">
            <el-button
              v-if="data.is_exist == true"
              type="text"
              size="mini"
            >
              已同步
            </el-button>
            <el-button
              v-else
              type="text"
              size="mini"
              style="color: red;"
            >
              未同步
            </el-button>
          </span>
        </span>
      </el-tree>
      <span slot="footer">
        <el-button type="primary" @click="synchronous()">一键同步</el-button>
        <el-button type="primary" @click="close()">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRemote, getSync } from '@/api/product'

export default {
  name: 'Synchronous',
  props: {
    open: {
      type: Boolean
    }
  },
  data() {
    return {
      loading: true,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    open(val) {
      if (val) {
        this.getList()
      }
    }
  },
  created() {
  },
  methods: {
    synchronous() {
      this.loading = true
      getSync().then(res => {
        if (res.code === 10000) {
          this.loading = false
          this.$message({
            message: '同步成功',
            type: 'success'
          })
          this.$emit('update:open', false)
        }
      })
    },
    handleNodeClick(data) {
      // console.log(data)
    },
    getList() {
      this.loading = true
      getRemote().then(res => {
        if (res.code === 10000) {
          this.data = res.data
          this.loading = false
        }
      })
    },
    close() {
      this.$emit('update:open', false)
    }
  }
}
</script>
